import React, { useState, useEffect } from "react";
import {
  PlusOutlined,
  EditOutlined,
  FileSearchOutlined,
  CloseCircleOutlined,
  AuditOutlined,
} from "@ant-design/icons";
import type { SizeType } from "antd/es/config-provider/SizeContext";
import {
  Button,
  DatePicker,
  Input,
  Radio,
  Table,
  Switch,
  notification,
  Modal,
  Form,
} from "antd";
import type { RadioChangeEvent } from "antd";
import "./index.scss";
import "./CusFrom.scss";
import type { ColumnsType } from "antd/es/table";
import * as service from "../../../../api/cgg/supplier";

const SupMent = () => {
  interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
  }

  const columns: ColumnsType<DataType> = [
    {
      title: "操作",
      dataIndex: "name",
      render: (_: any, record: any, index: number) => (
        <div className="icons ">
          <CloseCircleOutlined
            onClick={() => handleDetele(record.supplierId)}
            style={{ fontSize: 20 }}
          />
          <EditOutlined
            onClick={() => handleUpdate(record)}
            className="iconstyle"
          />
        </div>
      ),
    },
    {
      title: "供应商名称",
      dataIndex: "supplierName",
    },
    {
      title: "统一信用代码",
      dataIndex: "supplierCode",
    },
    {
      title: "状态",
      // dataIndex: "address",
      render: (_: any, record: any, index: any) => (
        <Switch
          checked={record.supplierState == 0 ? false : true}
          checkedChildren={record.supplierState}
          unCheckedChildren={record.supplierState}
        />
      ),
    },
    {
      title: "简称",
      dataIndex: "supplierShortname",
    },
    {
      title: "代号",
      dataIndex: "supplierCodename",
    },
    {
      title: "编码",
      dataIndex: "supplierNumname",
    },
    {
      title: "区域",
      dataIndex: "supplierAera",
    },

    {
      title: "添加日期",
      dataIndex: "supplierAddtime",
    },
  ];

  const { RangePicker } = DatePicker;
  const { Search } = Input;
  const [data, setData] = useState([]);
  //   function onChange(value: any, dateString: any) {
  //     console.log("Selected Time: ", value);
  //     console.log("Formatted Selected Time: ", dateString);
  //   }

  var handleDetele = async (supplierId: any) => {
    var res = await service.deleteSupplier({ supplierId });
    if (res.data.code == 200) {
      var newData = JSON.parse(JSON.stringify(data));
      var i: any = newData.findIndex(
        (item: any) => item.supplierId == supplierId
      );
      if (i != -1) {
        newData.splice(i, 1);
        setData(newData);
      }
      notification.success({ message: "删除成功" });
    } else {
      notification.error({ message: "删除失败" });
    }
  };
  function onOk(value: any) {
    console.log("onOk: ", value);
  }
  const [size, setSize] = useState<SizeType>("small");
  const onChange = (e: RadioChangeEvent) => {
    setSize(e.target.value);
  };
  useEffect(() => {
    var Workerlist = async () => {
      var res = await service.findAllSupplier({ page: 1, limit: 100 });
      console.log(res.data.data);
      res.data.data.records.forEach((item: any, index: any) => {
        item.key = index;
      });
      setData(res.data.data.records);
    };
    Workerlist();
  }, []);

  var handleSerch = async (value: any) => {
    var res = await service.findAllSupplierBySupplierName({
      page: 1,
      limit: 10,
      supplierName: value,
    });
    console.log(res);
    res.data.data.records.forEach((item: any, index: any) => {
      item.key = index;
    });
    setData(res.data.data.records);
  };
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const [open, setOpen] = useState(false);
  const onFinish = async (values: any) => {
    console.log("Success:", values);
    var res = await service.addSupplier(values);
    console.log(res);
    if (res.data.code == 200) {
      notification.success({ message: res.data.msg });

      var newData = JSON.parse(JSON.stringify(data));
      newData.push(values);
      newData.forEach((item: any, index: any) => {
        item.key = index;
      });
      setData(newData);
    }
    setOpen(false);
  };

  var handleUpdate = (record: any) => {
    setOpen2(true);
    console.log(record);

    form.setFieldsValue(record);
  };
  // 修改
  const onFinish1 = async (values: any) => {
    console.log("Success:", values);
    if (values.supplierId) {
      var res = await service.updateSupplier(values);
      console.log(res);
      if (res.data.code == 200) {
        notification.success({ message: res.data.msg });
        var res = await service.findAllSupplier({ page: 1, limit: 100 });
        console.log(res.data.data);
        res.data.data.records.forEach((item: any, index: any) => {
          item.key = index;
        });
        setData(res.data.data.records);
      }
    }
    setOpen2(false);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  // 全部
  var Supplierlist = async () => {
    var res = await service.findAllSupplier({ page: 1, limit: 100 });
    console.log(res.data.data);
    res.data.data.records.forEach((item: any, index: any) => {
      item.key = index;
    });
    setData(res.data.data.records);
  };
  // 启用
  var hanldeAll = async () => {
    var res = await service.findAllSupplierByState({
      page: 1,
      limit: data.length,
      state: 1,
    });
    console.log(res.data);
    res.data.data.records.forEach((item: any, index: number) => {
      item.key = index;
    });
    setData(res.data.data.records);
  };

  // 禁用
  var hanldeAllOff = async () => {
    var res = await service.findAllSupplierByState({
      page: 1,
      limit: 3,
      state: 0,
    });
    console.log(res.data);
    res.data.data.records.forEach((item: any, index: number) => {
      item.key = index;
    });
    setData(res.data.data.records);
  };
  const [open2, setOpen2] = useState(false);
  const [form] = Form.useForm();
  return (
    <div>
      <div className="head">
        <Button
          type="default"
          onClick={() => setOpen(true)}
          icon={<PlusOutlined />}
        >
          增加客户
        </Button>
        <div className="right">
          <Radio.Group className="radio_list" value={size} onChange={onChange}>
            <Radio.Button onClick={() => Supplierlist()} value="small">
              全部
            </Radio.Button>
            <Radio.Button onClick={() => hanldeAll()} value="middle">
              启用
            </Radio.Button>
            <Radio.Button onClick={() => hanldeAllOff()} value="large">
              禁用
            </Radio.Button>
          </Radio.Group>
          <Search
            style={{ width: 220 }}
            placeholder="请输入供应商名称"
            enterButton="搜索"
            onSearch={(value) => handleSerch(value)}
          />
        </div>
      </div>
      <Table columns={columns} dataSource={data} rowSelection={rowSelection} />
      <Modal title="新增产品" footer={null} open={open} width={1000}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="客户名称"
            name="supplierName"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="统一信用代码"
            name="supplierCode"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="简称"
            name="supplierShortname"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="代码"
            name="supplierCodename"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="编码"
            name="supplierNumname"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="区域"
            name="supplierAera"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="添加日期"
            name="supplierAddtime"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button
              className="btnS_ab"
              type="primary"
              onClick={() => setOpen(false)}
            >
              取消
            </Button>
            <Button type="primary" htmlType="submit">
              新增
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Modal title="修该改供应商信息" footer={null} open={open2} width={1000}>
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish1}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="供应商名称"
            name="supplierName"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="id"
            name="supplierId"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="统一信用代码"
            name="supplierCode"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="状态"
            name="supplierState"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="代码"
            name="supplierCodename"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="简称"
            name="supplierNumname"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="区域"
            name="supplierAera"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="添加日期"
            name="supplierAddtime"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button
              className="btnS_ab"
              type="primary"
              onClick={() => setOpen2(false)}
            >
              取消
            </Button>
            <Button type="primary" htmlType="submit">
              修改
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      ;
    </div>
  );
};

export default SupMent;
